<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>预约进程/历史</el-breadcrumb-item>
      <el-breadcrumb-item>查看历史会议</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 头部警告区域 -->
      <el-alert
        show-icon
        :closable="false"
        title="注意：只有通过审批的会议才会加入到历史会议中！"
        type="warning"
      ></el-alert>

      <!-- tab标签页 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="已进行的会议" name="done">
          <el-table :data="DoneList" border stripe
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
            <el-table-column type="index" align="center"></el-table-column>
            <el-table-column
              label="会议发起人"
              prop="applyName"
            ></el-table-column>
            <el-table-column
              label="会议室"
              prop="meetingRoom"
            ></el-table-column>
            <el-table-column label="参会人数" prop="applyNum"></el-table-column>
            <el-table-column
              label="会议主题"
              prop="applyTheme"
            ></el-table-column>
            <el-table-column label="开会日期">
              <template slot-scope="scope">
                <div>
                  {{ $moment(scope.row.applyDate).subtract(1, 'months').format("YYYY/MM/DD") }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="开会时间">
              <template slot-scope="scope">
               <!-- <div v-if="scope.row.applyTimestate == 1">9:30-11:30</div>
                <div v-if="scope.row.applyTimestate == 2">11:30-13:30</div>
                <div v-if="scope.row.applyTimestate == 3">15:30-17:30</div>
                <div v-if="scope.row.applyTimestate == 4">17:30-19:30</div>
                <div v-if="scope.row.applyTimestate == 5">19:30-20:30</div> -->
                <div >{{$moment(scope.row.applyStart).format('HH:mm')}}-{{$moment(scope.row.applyEnd).format('HH:mm')}}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-plus"
                  @click="getMeetingFilesList(scope.row.meetingId)"
                  center>下载会议文档</el-button
                >
                <el-button
                  type="text"
                  icon="el-icon-view"
                  @click="getSignNameList(scope.row.meetingId)">签到名单</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- Table -->
          <el-dialog title="下载会议文档" :visible.sync="onedialogTableVisible" width="42%">
            <el-table :data="meetingFilesList" max-height="250" stripe
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}">
              <el-table-column label="序号" type="index" width="100"></el-table-column>
              <el-table-column property="fileName" label="会议文档"></el-table-column>
              <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                      <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-download"
                  plain
                  @click="fileDownLoad(scope.row.fileName,scope.row.meetingId)"
                  center></el-button>
                  </template>
              </el-table-column>

            </el-table>
          </el-dialog>

          <!-- Table -->
          <el-dialog title="查看签到名单" :visible.sync="twodialogTableVisible" width="40%">

            <el-table :data="signNameList" max-height="250" stripe
               :header-cell-style="{'text-align':'center'}"
               :cell-style="{'text-align':'center'}">
              <el-table-column label="序号" type="index" width="100" ></el-table-column>
              <el-table-column property="staffName" label="签到人"></el-table-column>
            </el-table>
              <div class="outButton">
                <el-button size="small" type="success" icon="el-icon-download" @click="exportToExcel">导出数据</el-button>
              </div>

          </el-dialog>

          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChangeDone"
            @current-change="handleCurrentChangeDone"
            :current-page="queryDone.currentPage"
            :page-sizes="[2, 4, 8, 10]"
            :page-size="queryDone.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="doneTotal"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="未进行的会议" name="notdone">
          <el-table :data="NotDoneList" border stripe
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
            <el-table-column type="index"></el-table-column>
            <el-table-column
              label="会议发起人"
              prop="applyName"
            ></el-table-column>
            <el-table-column
              label="会议室"
              prop="meetingRoom"
            ></el-table-column>
            <el-table-column label="参会人数" prop="applyNum"></el-table-column>
            <el-table-column
              label="会议主题"
              prop="applyTheme"
            ></el-table-column>
            <el-table-column label="开会日期">
              <template slot-scope="scope">
                <div>
                  {{ $moment(scope.row.applyDate).subtract(1, 'months').format("YYYY/MM/DD") }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="开会时间">
              <template slot-scope="scope">
                <!-- <div v-if="scope.row.applyTimestate == 1">9:30-11:30</div>
                <div v-if="scope.row.applyTimestate == 2">11:30-13:30</div>
                <div v-if="scope.row.applyTimestate == 3">15:30-17:30</div>
                <div v-if="scope.row.applyTimestate == 4">17:30-19:30</div>
                <div v-if="scope.row.applyTimestate == 5">19:30-20:30</div> -->
                <div >{{$moment(scope.row.applyStart).format('HH:mm')}}-{{$moment(scope.row.applyEnd).format('HH:mm')}}</div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChangeNotDone"
            @current-change="handleCurrentChangeNotDone"
            :current-page="queryNotDone.currentPage"
            :page-sizes="[2, 4, 8, 10]"
            :page-size="queryNotDone.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="notDoneTotal"
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      meetingFilesList:[],
      DoneList: [],
      NotDoneList: [],
      onedialogTableVisible: false,
      twodialogTableVisible: false,
      signNameList:[],
      activeName: "done",
      queryDone: {
        pageSize: 4,
        currentPage: 1,
        pass: 1,
      },
      queryNotDone: {
        pageSize: 4,
        currentPage: 1,
        pass: 0,
      },
      doneTotal: 0,
      notDoneTotal: 0,
    };
  },
  created() {
    this.getDoneList();
    this.getNotDoneList();
  },
  methods: {
    async getMeetingFilesList(mId) {
       this.onedialogTableVisible = true;
       const { data: res } = await this.$http.post(
        "/files/getFilesList", {meetingId: mId});
      if (res.code !== 100) {
        return this.$message.error("暂无数据！");
      }
      this.meetingFilesList = res.extend.result;
      console.log(res);
    },
    async fileDownLoad(fileName,meetingId) {
       var load_url = '/files/'+ meetingId + '/' + fileName;
       console.log('http://localhost:3300'+load_url);
       window.open('http://localhost:3300'+load_url);
    },
    async getSignNameList(mId) {
       this.twodialogTableVisible = true;
       const { data: res } = await this.$http.post(
        "/sign/getSignNamesList", {meetingId: mId});
      if (res.code !== 100) {
        return this.$message.error("暂无数据！");
      }
      this.signNameList = res.extend.result;
      console.log(res);
    },
    exportToExcel() {
      if(this.signNameList == 0){
        return this.$message.error("暂无数据！");
      }
      this.$confirm('确定下载列表文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.excelData = this.signNameList // 导出的数据list。
        this.export2Excel()
      }).catch(() => {})
    },
    export2Excel () {
      var that = this
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/assets/js/Export2Excel.js')// js文件的位置
        const tHeader = ['签到人']
        const filterVal = ['staffName'] // 导出的表头字段名，需要导出表格字段名
        const list = that.signNameList
        const data = that.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '签到名单')// 导出的表格名称
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
     fixdata(data) { // 文件流转BinaryString
      var o = ''
      var l = 0
      var w = 10240
      for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
      return o
    },
    async getDoneList() {
      const { data: res } = await this.$http.post(
        "/meeting/historyParticipate",
        this.queryDone
      );
      if (res.code !== 100) {
        return this.$message.error("获取历史会议列表失败！");
      }
      this.DoneList = res.extend.result.records;
      this.doneTotal = res.extend.result.total;
      console.log(res);
    },
    async getNotDoneList() {
      const { data: res } = await this.$http.post(
        "/meeting/historyParticipate",
        this.queryNotDone
      );
      if (res.code !== 100) {
        return this.$message.error("获取历史会议列表失败！");
      }
      this.NotDoneList = res.extend.result.records;
      this.notDoneTotal = res.extend.result.total;
    },
    handleSizeChangeDone(newSize) {
      this.queryDone.pageSize = newSize;
      this.getDoneList();
    },
    handleCurrentChangeDone(newPage) {
      this.queryDone.currentPage = newPage;
      this.getDoneList();
    },
    handleSizeChangeNotDone(newSize) {
      this.queryNotDone.pageSize = newSize;
      this.getNotDoneList();
    },
    handleCurrentChangeNotDone(newPage) {
      this.queryNotDone.currentPage = newPage;
      this.getNotDoneList();
    },
  },
};
</script>

<style scoped>
.el-tabs {
  margin-top: 15px;
}
.el-table{
  font-size: 13.5px
}
.outButton{
  position:absolute;
  right:45px;
  top:55px;
}
</style>
